<template>
  <div class="merchant-apply-container">
    <div class="apply-card">
      <h2 class="title">申请成为商户</h2>
      
      <!-- 申请状态提示 -->
      <div v-if="showApplyStatus" class="apply-status-card" :class="statusClass">
        <div class="status-header">
          <i class="status-icon">{{ statusIcon }}</i>
          <h3 class="status-title">{{ statusTitle }}</h3>
        </div>
        <div class="status-content">
          <p>{{ statusDesc }}</p>
          <div v-if="applyRecord" class="status-detail">
            <p><span class="label">申请类型：</span>{{ applyRecord.sellerType === 0 ? '个人商户' : '企业商户' }}</p>
            <p><span class="label">申请时间：</span>{{ formatTime(applyRecord.applyTime) }}</p>
            <p v-if="applyRecord.auditStatus === 1"><span class="label">审核时间：</span>{{ formatTime(applyRecord.auditTime) }}</p>
            <p v-if="applyRecord.auditRemark"><span class="label">审核备注：</span>{{ applyRecord.auditRemark }}</p>
          </div>
          <!-- 已驳回时显示重新申请提示 -->
          <div v-if="applyRecord?.auditStatus === 2" class="reapply-hint">
            <p>可修改信息后重新提交申请</p>
          </div>
        </div>
      </div>
      
      <!-- 商户类型选择 -->
      <div class="form-group">
        <label class="form-label">商户类型 <span class="required">*</span></label>
        <div class="radio-group">
          <label class="radio-item">
            <input 
              type="radio" 
              v-model="shangHuData.sellerType" 
              value="0" 
              @change="handleTypeChange"
              :disabled="isDisabledForm"
            >
            <span>个人商户</span>
          </label>
          <label class="radio-item">
            <input 
              type="radio" 
              v-model="shangHuData.sellerType" 
              value="1" 
              @change="handleTypeChange"
              :disabled="isDisabledForm"
            >
            <span>企业商户</span>
          </label>
        </div>
      </div>
      
      <!-- 个人商户表单 -->
      <div v-if="shangHuData.sellerType === '0'">
        <!-- 身份证正面 -->
        <div class="form-group">
          <label class="form-label">身份证正面 <span class="required">*</span></label>
          <div class="upload-container">
            <div class="upload-area" @click="triggerUpload('idCardFront')" :style="{ pointerEvents: isDisabledForm ? 'none' : 'auto' }">
              <img 
                v-if="shangHuData.idCardFront || (applyRecord && applyRecord.idCardFront)" 
                :src="shangHuData.idCardFront || applyRecord.idCardFront" 
                class="preview-img"
                alt="身份证正面"
              >
              <div v-else class="upload-placeholder">
                <i class="upload-icon">📷</i>
                <p>点击上传身份证正面照片</p>
                <p class="hint-text">支持JPG、PNG格式，大小不超过5MB</p>
              </div>
              <div v-if="uploading['idCardFront']" class="uploading-mask">
                <span>上传中...</span>
              </div>
              <div v-if="applyRecord?.auditStatus === 0" class="status-mask pending">审核中，不可修改</div>
              <div v-if="applyRecord?.auditStatus === 1" class="status-mask approved">已通过审核，不可修改</div>
            </div>
            <input 
              type="file" 
              ref="idCardFrontInput" 
              accept="image/jpeg,image/png" 
              class="file-input"
              @change="handleFileUpload($event, 'idCardFront')"
              :disabled="isDisabledForm"
            >
          </div>
          <p v-if="errors.idCardFront" class="error-text">{{ errors.idCardFront }}</p>
        </div>
        
        <!-- 身份证反面 -->
        <div class="form-group">
          <label class="form-label">身份证反面 <span class="required">*</span></label>
          <div class="upload-container">
            <div class="upload-area" @click="triggerUpload('idCardBack')" :style="{ pointerEvents: isDisabledForm ? 'none' : 'auto' }">
              <img 
                v-if="shangHuData.idCardBack || (applyRecord && applyRecord.idCardBack)" 
                :src="shangHuData.idCardBack || applyRecord.idCardBack" 
                class="preview-img"
                alt="身份证反面"
              >
              <div v-else class="upload-placeholder">
                <i class="upload-icon">📷</i>
                <p>点击上传身份证反面照片</p>
                <p class="hint-text">支持JPG、PNG格式，大小不超过5MB</p>
              </div>
              <div v-if="uploading['idCardBack']" class="uploading-mask">
                <span>上传中...</span>
              </div>
              <div v-if="applyRecord?.auditStatus === 0" class="status-mask pending">审核中，不可修改</div>
              <div v-if="applyRecord?.auditStatus === 1" class="status-mask approved">已通过审核，不可修改</div>
            </div>
            <input 
              type="file" 
              ref="idCardBackInput" 
              accept="image/jpeg,image/png" 
              class="file-input"
              @change="handleFileUpload($event, 'idCardBack')"
              :disabled="isDisabledForm"
            >
          </div>
          <p v-if="errors.idCardBack" class="error-text">{{ errors.idCardBack }}</p>
        </div>
      </div>
      
      <!-- 企业商户表单 -->
      <div v-if="shangHuData.sellerType === '1'">
        <!-- 营业执照 -->
        <div class="form-group">
          <label class="form-label">营业执照 <span class="required">*</span></label>
          <div class="upload-container">
            <div class="upload-area" @click="triggerUpload('businessLicense')" :style="{ pointerEvents: isDisabledForm ? 'none' : 'auto' }">
              <img 
                v-if="shangHuData.businessLicense || (applyRecord && applyRecord.businessLicense)" 
                :src="shangHuData.businessLicense || applyRecord.businessLicense" 
                class="preview-img"
                alt="营业执照"
              >
              <div v-else class="upload-placeholder">
                <i class="upload-icon">📄</i>
                <p>点击上传营业执照照片</p>
                <p class="hint-text">支持JPG、PNG格式，大小不超过5MB</p>
              </div>
              <div v-if="uploading['businessLicense']" class="uploading-mask">
                <span>上传中...</span>
              </div>
              <div v-if="applyRecord?.auditStatus === 0" class="status-mask pending">审核中，不可修改</div>
              <div v-if="applyRecord?.auditStatus === 1" class="status-mask approved">已通过审核，不可修改</div>
            </div>
            <input 
              type="file" 
              ref="businessLicenseInput" 
              accept="image/jpeg,image/png" 
              class="file-input"
              @change="handleFileUpload($event, 'businessLicense')"
              :disabled="isDisabledForm"
            >
          </div>
          <p v-if="errors.businessLicense" class="error-text">{{ errors.businessLicense }}</p>
        </div>
        
        <!-- 法人身份证正面 -->
        <div class="form-group">
          <label class="form-label">法人身份证正面 <span class="required">*</span></label>
          <div class="upload-container">
            <div class="upload-area" @click="triggerUpload('legalIdCardFront')" :style="{ pointerEvents: isDisabledForm ? 'none' : 'auto' }">
              <img 
                v-if="shangHuData.legalIdCardFront || (applyRecord && applyRecord.legalIdCardFront)" 
                :src="shangHuData.legalIdCardFront || applyRecord.legalIdCardFront" 
                class="preview-img"
                alt="法人身份证正面"
              >
              <div v-else class="upload-placeholder">
                <i class="upload-icon">📷</i>
                <p>点击上传法人身份证正面照片</p>
                <p class="hint-text">支持JPG、PNG格式，大小不超过5MB</p>
              </div>
              <div v-if="uploading['legalIdCardFront']" class="uploading-mask">
                <span>上传中...</span>
              </div>
              <div v-if="applyRecord?.auditStatus === 0" class="status-mask pending">审核中，不可修改</div>
              <div v-if="applyRecord?.auditStatus === 1" class="status-mask approved">已通过审核，不可修改</div>
            </div>
            <input 
              type="file" 
              ref="legalIdCardFrontInput" 
              accept="image/jpeg,image/png" 
              class="file-input"
              @change="handleFileUpload($event, 'legalIdCardFront')"
              :disabled="isDisabledForm"
            >
          </div>
          <p v-if="errors.legalIdCardFront" class="error-text">{{ errors.legalIdCardFront }}</p>
        </div>
        
        <!-- 法人身份证反面 -->
        <div class="form-group">
          <label class="form-label">法人身份证反面 <span class="required">*</span></label>
          <div class="upload-container">
            <div class="upload-area" @click="triggerUpload('legalIdCardBack')" :style="{ pointerEvents: isDisabledForm ? 'none' : 'auto' }">
              <img 
                v-if="shangHuData.legalIdCardBack || (applyRecord && applyRecord.legalIdCardBack)" 
                :src="shangHuData.legalIdCardBack || applyRecord.legalIdCardBack" 
                class="preview-img"
                alt="法人身份证反面"
              >
              <div v-else class="upload-placeholder">
                <i class="upload-icon">📷</i>
                <p>点击上传法人身份证反面照片</p>
                <p class="hint-text">支持JPG、PNG格式，大小不超过5MB</p>
              </div>
              <div v-if="uploading['legalIdCardBack']" class="uploading-mask">
                <span>上传中...</span>
              </div>
              <div v-if="applyRecord?.auditStatus === 0" class="status-mask pending">审核中，不可修改</div>
              <div v-if="applyRecord?.auditStatus === 1" class="status-mask approved">已通过审核，不可修改</div>
            </div>
            <input 
              type="file" 
              ref="legalIdCardBackInput" 
              accept="image/jpeg,image/png" 
              class="file-input"
              @change="handleFileUpload($event, 'legalIdCardBack')"
              :disabled="isDisabledForm"
            >
          </div>
          <p v-if="errors.legalIdCardBack" class="error-text">{{ errors.legalIdCardBack }}</p>
        </div>
      </div>
      
      <!-- 提交按钮 -->
      <div class="form-actions">
        <button 
          class="submit-btn" 
          @click="addShangHu"
          :disabled="isSubmitting || Object.values(uploading).some(v => v) || isDisabledSubmit"
        >
          <span v-if="!isSubmitting">
            {{ applyRecord?.auditStatus === 2 ? '重新提交申请' : '提交申请' }}
          </span>
          <span v-if="isSubmitting">提交中...</span>
        </button>
      </div>
    </div>
    
    <!-- 成功提示弹窗 -->
    <div v-if="showSuccess" class="success-modal">
      <div class="modal-content">
        <div class="success-icon">✓</div>
        <h3>{{ applyRecord?.auditStatus === 2 ? '重新提交成功！' : '申请提交成功！' }}</h3>
        <p>您的商户申请已提交，我们将尽快审核，请耐心等待。</p>
        <button class="ok-btn" @click="showSuccess = false">确定</button>
      </div>
    </div>
    
    <!-- 自定义通知组件 -->
    <div v-if="showNotify" class="custom-notify" :class="notifyType">
      <span class="notify-icon">{{ notifyIcon }}</span>
      <span class="notify-text">{{ notifyMessage }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter';

// Pinia状态
const userStore = useCounterStore();

// 模拟获取当前用户ID（实际项目中可能从登录状态获取）
const getUserId = () => {
  console.log('获取用户ID', userStore.userId);
  return userStore.userId; // 从Pinia获取真实用户ID
};

// 定义表单数据对象
const shangHuData = reactive({
  userId: getUserId(),
  sellerType: '0', // 默认个人商户
  idCardFront: '',
  idCardBack: '',
  businessLicense: '',
  legalIdCardFront: '',
  legalIdCardBack: '',
  auditStatus: 0, // 默认未审核
  applyTime: '' // 提交时自动生成
});

// 错误信息
const errors = reactive({
  idCardFront: '',
  idCardBack: '',
  businessLicense: '',
  legalIdCardFront: '',
  legalIdCardBack: ''
});

// 上传状态管理
const uploading = reactive({
  idCardFront: false,
  idCardBack: false,
  businessLicense: false,
  legalIdCardFront: false,
  legalIdCardBack: false
});

// 上传相关的ref
const idCardFrontInput = ref(null);
const idCardBackInput = ref(null);
const businessLicenseInput = ref(null);
const legalIdCardFrontInput = ref(null);
const legalIdCardBackInput = ref(null);

// 状态控制
const isSubmitting = ref(false);
const showSuccess = ref(false);
const isLoading = ref(false); // 查询状态加载中

// 申请记录相关状态
const applyRecord = ref(null); // 存储查询到的申请记录
const showApplyStatus = computed(() => !!applyRecord.value); // 是否显示申请状态卡片

// 核心逻辑：表单是否禁用（仅审核通过/待审核时禁用）
const isDisabledForm = computed(() => {
  if (!applyRecord.value) return false;
  // 审核通过（1）或待审核（0）时禁用表单
  return [0, 1].includes(applyRecord.value.auditStatus);
});

// 核心逻辑：提交按钮是否禁用（仅审核通过/待审核时禁用）
const isDisabledSubmit = computed(() => {
  if (!applyRecord.value) return false;
  // 审核通过（1）或待审核（0）时禁用提交
  return [0, 1].includes(applyRecord.value.auditStatus);
});

// 通知相关状态
const showNotify = ref(false);
const notifyMessage = ref('');
const notifyType = ref('success'); // success / error / warning
const notifyIcon = ref('✓');

// 申请状态展示相关
const statusTitle = computed(() => {
  if (!applyRecord.value) return '';
  switch (applyRecord.value.auditStatus) {
    case 0:
      return '申请待审核';
    case 1:
      return '申请已通过';
    case 2:
      return '申请已驳回';
    default:
      return '申请状态未知';
  }
});

const statusDesc = computed(() => {
  if (!applyRecord.value) return '';
  switch (applyRecord.value.auditStatus) {
    case 0:
      return '您的商户申请已提交，工作人员将在1-3个工作日内审核，请耐心等待';
    case 1:
      return '恭喜！您的商户申请已通过审核，可正常开展经营活动';
    case 2:
      return '您的商户申请未通过审核，请根据备注修改信息后重新提交';
    default:
      return '无法获取申请状态，请联系客服咨询';
  }
});

const statusIcon = computed(() => {
  if (!applyRecord.value) return '';
  switch (applyRecord.value.auditStatus) {
    case 0:
      return '⏳';
    case 1:
      return '✅';
    case 2:
      return '❌';
    default:
      return 'ℹ️';
  }
});

const statusClass = computed(() => {
  if (!applyRecord.value) return '';
  switch (applyRecord.value.auditStatus) {
    case 0:
      return 'status-pending';
    case 1:
      return 'status-approved';
    case 2:
      return 'status-rejected';
    default:
      return 'status-default';
  }
});

// 初始化：查询用户历史申请记录
onMounted(async () => {
  await fetchApplyRecord();
  // 已驳回时回显上次上传的图片（方便修改）
  if (applyRecord.value?.auditStatus === 2) {
    shangHuData.idCardFront = applyRecord.value.idCardFront || '';
    shangHuData.idCardBack = applyRecord.value.idCardBack || '';
    shangHuData.businessLicense = applyRecord.value.businessLicense || '';
    shangHuData.legalIdCardFront = applyRecord.value.legalIdCardFront || '';
    shangHuData.legalIdCardBack = applyRecord.value.legalIdCardBack || '';
  }
});

// 查询用户历史申请记录
const fetchApplyRecord = async () => {
  const userId = getUserId();
  if (!userId) {
    showNotification('用户未登录，无法查询申请记录', 'warning');
    return;
  }
  
  isLoading.value = true;
  try {
    const res = await axios.get(`/eduservice/sellerQualification/getUseId2/${userId}`);
    console.log('查询申请记录结果：', res.data);
    
    // 处理返回结果：如果有数据则存储，无数据则设为null
    if (res.data && res.data.qualificationId) {
      applyRecord.value = res.data;
      // 同步申请类型到表单（回显）
      shangHuData.sellerType = res.data.sellerType.toString();
    } else {
      applyRecord.value = null;
    }
  } catch (error) {
    console.error('查询申请记录失败', error);
    showNotification('查询申请记录失败，请稍后重试', 'error');
    applyRecord.value = null;
  } finally {
    isLoading.value = false;
  }
};

// 格式化时间（ISO格式转本地时间）
const formatTime = (timeStr) => {
  if (!timeStr) return '暂无';
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 显示通知
const showNotification = (message, type = 'success') => {
  notifyMessage.value = message;
  notifyType.value = type;
  
  switch (type) {
    case 'success':
      notifyIcon.value = '✓';
      break;
    case 'error':
      notifyIcon.value = '✗';
      break;
    case 'warning':
      notifyIcon.value = '!';
      break;
  }
  
  showNotify.value = true;
  
  // 3秒后自动关闭
  setTimeout(() => {
    showNotify.value = false;
  }, 3000);
};

// 处理商户类型变更
const handleTypeChange = () => {
  // 清空错误信息
  Object.keys(errors).forEach(key => {
    errors[key] = '';
  });
};

// 触发文件上传
const triggerUpload = (type) => {
  // 如果表单禁用或正在上传中，则不触发新的上传
  if (isDisabledForm.value || uploading[type]) return;
  
  switch (type) {
    case 'idCardFront':
      idCardFrontInput.value.click();
      break;
    case 'idCardBack':
      idCardBackInput.value.click();
      break;
    case 'businessLicense':
      businessLicenseInput.value.click();
      break;
    case 'legalIdCardFront':
      legalIdCardFrontInput.value.click();
      break;
    case 'legalIdCardBack':
      legalIdCardBackInput.value.click();
      break;
  }
};

// 处理文件上传
const handleFileUpload = async (e, type) => {
  const file = e.target.files[0];
  if (!file || isDisabledForm.value) return;
  
  // 验证文件类型
  const validTypes = ['image/jpeg', 'image/png'];
  if (!validTypes.includes(file.type)) {
    errors[type] = '请上传JPG或PNG格式的图片';
    showNotification('请上传JPG或PNG格式的图片', 'error');
    return;
  }
  
  // 验证文件大小（5MB）
  if (file.size > 5 * 1024 * 1024) {
    errors[type] = '图片大小不能超过5MB';
    showNotification('图片大小不能超过5MB', 'error');
    return;
  }
  
  // 清除错误
  errors[type] = '';
  
  try {
    // 显示上传中状态
    uploading[type] = true;
    
    // 创建FormData对象
    const formData = new FormData();
    formData.append('file', file); // 假设后端接收的参数名为file
    
    // 调用OSS上传接口
    const { data } = await axios.post(
      "/serviceoss/fileoss/uploadAvatarToOss",
      formData,
      {
        headers: { "Content-Type": "multipart/form-data" },
      }
    );
    console.log('上传成功，返回数据：', data);
    
    // 根据实际返回格式处理：{success: true, code: 20000, message: "成功", data: {url: "图片URL"}}
    if (data.success && data.code === 20000 && data.data && data.data.url) {
      shangHuData[type] = data.data.url;
      showNotification('上传成功'); // 替换原来的alert
    } else {
      const errorMsg = '上传失败：' + (data.message || '未知错误');
      errors[type] = errorMsg;
      showNotification(errorMsg, 'error');
      console.error('上传返回格式不正确', data);
    }
  } catch (error) {
    console.error('文件上传失败', error);
    const errorMsg = '上传失败：' + (error.response?.data?.message || '网络错误');
    errors[type] = errorMsg;
    showNotification(errorMsg, 'error');
  } finally {
    // 隐藏上传中状态
    uploading[type] = false;
    // 重置input值，以便可以重复上传同一文件
    e.target.value = '';
  }
};

// 表单验证
const validateForm = () => {
  let isValid = true;
  Object.keys(errors).forEach(key => {
    errors[key] = '';
  });
  
  // 检查用户是否登录
  const userId = getUserId();
  if (!userId) {
    showNotification('用户未登录，请先登录', 'error');
    return false;
  }
  
  // 检查是否有正在上传的文件
  if (Object.values(uploading).some(v => v)) {
    showNotification('有文件正在上传中，请等待上传完成', 'warning');
    return false;
  }
  
  if (shangHuData.sellerType === '0') {
    // 个人商户验证
    if (!shangHuData.idCardFront) {
      errors.idCardFront = '请上传身份证正面照片';
      isValid = false;
    }
    if (!shangHuData.idCardBack) {
      errors.idCardBack = '请上传身份证反面照片';
      isValid = false;
    }
  } else {
    // 企业商户验证
    if (!shangHuData.businessLicense) {
      errors.businessLicense = '请上传营业执照照片';
      isValid = false;
    }
    if (!shangHuData.legalIdCardFront) {
      errors.legalIdCardFront = '请上传法人身份证正面照片';
      isValid = false;
    }
    if (!shangHuData.legalIdCardBack) {
      errors.legalIdCardBack = '请上传法人身份证反面照片';
      isValid = false;
    }
  }
  
  // 如果有验证错误，显示第一个错误
  const firstError = Object.values(errors).find(msg => msg);
  if (firstError) {
    showNotification(firstError, 'error');
  }
  
  return isValid;
};

// 提交申请（支持首次提交和驳回后重新提交）
async function addShangHu() {
  if (!validateForm()) return;
  
  isSubmitting.value = true;
  
  try {
    // 设置申请时间为当前时间
    shangHuData.applyTime = new Date().toISOString();
    const userId = getUserId();
    
    // 再次确认用户ID有效
    if (!userId) {
      showNotification('用户未登录，请先登录', 'error');
      isSubmitting.value = false;
      return;
    }
    shangHuData.userId = userId;
    
    console.log('提交的商户数据：', shangHuData);
    
    // 发送请求（如果是重新提交，后端可根据userId更新记录或创建新记录）
    const response = await axios.post(
      '/eduservice/sellerQualification/addShangHu',
      shangHuData
    );
    
    // 处理提交结果
    if (response.data.success && response.data.code === 20000) {
      showSuccess.value = true;
      // 提交成功后重新查询申请记录，更新状态展示
      setTimeout(async () => {
        await fetchApplyRecord();
      }, 1000);
      // 重新提交成功后不清空表单（方便再次修改），首次提交成功后清空
      if (!applyRecord.value || applyRecord.value.auditStatus !== 2) {
        resetForm();
      }
    } else {
      const errorMsg = '提交失败：' + (response.data.message || '未知错误');
      showNotification(errorMsg, 'error');
    }
  } catch (error) {
    console.error('提交失败', error);
    // 处理外键约束相关错误
    if (error.message.includes('foreign key constraint fails')) {
      showNotification('提交失败：用户不存在或无权限，请重新登录', 'error');
    } else {
      const errorMsg = '提交失败，请稍后重试：' + (error.response?.data?.message || error.message);
      showNotification(errorMsg, 'error');
    }
  } finally {
    isSubmitting.value = false;
  }
}

// 重置表单
const resetForm = () => {
  shangHuData.sellerType = '0';
  shangHuData.idCardFront = '';
  shangHuData.idCardBack = '';
  shangHuData.businessLicense = '';
  shangHuData.legalIdCardFront = '';
  shangHuData.legalIdCardBack = '';
};
</script>

<style scoped>
.merchant-apply-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.apply-card {
  width: 100%;
  max-width: 700px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

.title {
  font-size: 1.8rem;
  color: #333;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 600;
}

/* 申请状态卡片样式 */
.apply-status-card {
  margin-bottom: 1.5rem;
  padding: 1.2rem;
  border-radius: 8px;
  border: 1px solid #eee;
}

.status-pending {
  border-color: #faad14;
  background-color: rgba(250, 173, 20, 0.05);
}

.status-approved {
  border-color: #52c41a;
  background-color: rgba(82, 196, 26, 0.05);
}

.status-rejected {
  border-color: #ff4d4f;
  background-color: rgba(255, 77, 79, 0.05);
}

.status-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.status-icon {
  font-size: 1.2rem;
}

.status-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.status-pending .status-title {
  color: #faad14;
}

.status-approved .status-title {
  color: #52c41a;
}

.status-rejected .status-title {
  color: #ff4d4f;
}

.status-content {
  color: #666;
  font-size: 0.95rem;
}

.status-detail {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed #eee;
}

.status-detail .label {
  color: #444;
  font-weight: 500;
  display: inline-block;
  width: 80px;
}

.status-detail p {
  margin: 0.3rem 0;
}

/* 重新申请提示 */
.reapply-hint {
  margin-top: 0.8rem;
  color: #1890ff;
  font-size: 0.9rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.8rem;
  font-weight: 500;
  color: #444;
  font-size: 1rem;
}

.required {
  color: #ff4d4f;
}

.radio-group {
  display: flex;
  gap: 2rem;
  padding: 0.5rem 0;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-item input:disabled + span {
  color: #999;
  cursor: not-allowed;
}

.radio-item input {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

.upload-container {
  position: relative;
}

.file-input {
  display: none;
}

.upload-area {
  width: 100%;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.upload-area:hover {
  border-color: #1890ff;
  background-color: rgba(24, 144, 255, 0.03);
}

/* 状态遮罩（待审核/已通过） */
.status-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  font-weight: 500;
  pointer-events: none;
}

.status-mask.pending {
  color: #faad14;
}

.status-mask.approved {
  color: #999;
}

.upload-placeholder {
  color: #666;
}

.upload-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: inline-block;
}

.preview-img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  object-fit: contain;
}

.hint-text {
  font-size: 0.85rem;
  color: #999;
  margin-top: 0.5rem;
}

.error-text {
  color: #ff4d4f;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* 上传中遮罩 */
.uploading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  color: #1890ff;
  font-weight: 500;
}

.form-actions {
  margin-top: 2rem;
  text-align: center;
}

.submit-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.8rem 2.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: #096dd9;
}

.submit-btn:disabled {
  background-color: #8cc5ff;
  cursor: not-allowed;
}

.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  width: 90%;
  max-width: 400px;
  text-align: center;
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.success-icon {
  width: 60px;
  height: 60px;
  background-color: #52c41a;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
}

.ok-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 2rem;
  margin-top: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ok-btn:hover {
  background-color: #096dd9;
}

/* 自定义通知样式 */
.custom-notify {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: notifyFadeIn 0.3s ease, notifyFadeOut 0.3s ease 2.7s forwards;
}

@keyframes notifyFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes notifyFadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
}

.custom-notify.success {
  background-color: #52c41a;
}

.custom-notify.error {
  background-color: #ff4d4f;
}

.custom-notify.warning {
  background-color: #faad14;
}

.notify-icon {
  font-weight: bold;
}

.notify-text {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .apply-card {
    padding: 1.5rem;
  }
  
  .title {
    font-size: 1.5rem;
  }
  
  .upload-area {
    padding: 1.5rem 1rem;
  }
  
  .custom-notify {
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .status-detail .label {
    width: 60px;
  }
}
</style>